<script setup lang="ts">
import useArticel from '../../composition/useArticel'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import img from '../../assets/img/avt-2.jpeg'
import { ref } from 'vue'
import useCommont from '../../composition/useCommont'
import { useUserStore } from '../../store/userStore'
import userHeader from '../../components/userHeader.vue'
import popup from '../../components/popup.vue'
import useSupport from '../../composition/useSupport'
import useStar from '../../composition/useStar'
import { showNotify } from 'vant'

const userStore = useUserStore()
const userInfo = userStore.userInfo

const route = useRoute()

const { getOneArticle, articel, deleArticle } = useArticel()
const { getAll, commontList, createCommont, form, deleteCommont } = useCommont(+route.params.id)

await getOneArticle(+route.params.id)
await getAll()

const { countNum, support, findOne, supportInfo, cancelSupport } = useSupport(+articel.value!.id)
const num = ref(await countNum())
await findOne()

const { star, cancelStar, findOneStar, starInfo } = useStar(+articel.value!.id)
await findOneStar()

const router = useRouter()
const toDeleteArticle = (id: number) => {
   deleArticle(id)
      .then((res) => {
         router.push({ name: 'me.article', params: { userId: articel.value?.user?.id } })
      })
      .catch((err) => {
         return err
      })
}

// 点赞图标的颜色和样式初始值
const supportColor = ref('')
const supportName = ref('good-job-o')
if (supportInfo.value?.user?.id == userInfo?.id) {
   supportColor.value = '#1989fa'
   supportName.value = 'good-job'
}
// 点赞和取消点赞
const clickSupport = async () => {
   if (supportInfo.value?.user?.id == userInfo?.id) {
      await cancelSupport(+supportInfo.value!.id)
      supportColor.value = ''
      supportName.value = 'good-job-o'
      await findOne()
      num.value = num.value - 1
   } else {
      supportColor.value = '#1989fa'
      supportName.value = 'good-job'
      await support()
      await findOne()
      num.value = num.value + 1
   }
}

// 收藏的初始状态
const starName = ref('star-o')
const starColor = ref('')
if (starInfo.value?.user?.id == userInfo?.id) {
   starName.value = 'star'
   starColor.value = '#1989fa'
}
// 收藏和取消
const clickStar = async () => {
   if (starInfo.value?.user?.id == userInfo?.id) {
      await cancelStar(+starInfo.value!.id)
      starColor.value = ''
      starName.value = 'star-o'
      await findOneStar()
   } else {
      starColor.value = '#1989fa'
      starName.value = 'star'
      await star()
      await findOneStar()
   }
}

// 弹出评论
const showCenter = ref(false)
const showPopup = () => {
   if (userInfo?.status) return showNotify({ type: 'warning', message: '已被禁言' })
   showCenter.value = true
}

// 发表评论
const create = async () => {
   await createCommont()
   showCenter.value = false
   form.value.content = ''
}

// 设置回复的form值，并弹出发表评论
const toReply = async (commontId?: number, userId?: number) => {
   form.value.commontId = commontId
   form.value.replyUserId = userId

   showCenter.value = true
}
</script>

<template>
   <div class="w-screen h-screen bg">
      <van-nav-bar fixed title="文章详情" left-text="返回" left-arrow @click-left="$router.push({ name: 'home' })" />

      <div class="px-5 pt-4 flex items-center">
         <span class="font-bold text-xl mr-3">{{ articel!.title }}</span>
         <span><van-tag plain size="large" type="primary">{{ articel!.category.name }}</van-tag>
         </span>
      </div>

      <user-header :user="articel!.user!" :commont-create-date="+(articel!.createDate!)"></user-header>

      <div class="px-4">
         <v-md-preview :text="articel!.content" height="400px"></v-md-preview>

         <div v-if="articel?.user?.id == userInfo?.id" class="flex items-center">
            <div @click="toDeleteArticle(+articel!.id)" class="mr-2">
               <van-icon size="20px" name="delete-o" />
            </div>
            <div @click="$router.push({ name: 'add', query: { id: articel?.id } })">
               <van-icon size="20px" name="edit" />
            </div>
         </div>
      </div>
      <div class="commont p-5 pb-20">
         <div class="font-bold">全部评论:</div>
         <section class="mt-3" v-for="item in commontList">
            <div class="flex items-center justify-between">
               <div class="flex items-center">
                  <img class="w-8 h-8 object-cover rounded-full" :src="item.user.avatar || img" alt="" />
                  <div class="p-2">
                     <div class="text-[10px] font-bold">{{ item.user.nickname || item.user.username }}</div>
                     <div class="text-[8px] text-slate-600">{{ dayjs(item.createDate).fromNow() }}</div>
                  </div>
               </div>
               <div class="flex items-center">
                  <div><van-icon @click="toReply(item.id)" size="18px" name="chat-o" /></div>
                  <div v-if="item.userId == userInfo?.id">
                     <van-icon @click="deleteCommont(articel!.id, item.id)" size="18px" class="ml-3" name="delete-o" />
                  </div>
               </div>
            </div>
            <div>
               {{ item.content }}
            </div>

            <div class="reply p-2 bg-[#f7f8fa]" v-if="item.replys.length > 0">
               <div class="item" v-for="reply in item.replys" @click="toReply(item.id, reply.user.id)">
                  <span class="text-slate-500">{{ reply.user.nickname || reply.user.username }}</span>
                  <span v-if="reply.replyUserId && reply.replyUserId != reply.userId" class="text-slate-500">&nbsp;@{{
                     reply.replyUser?.nickname || reply.replyUser?.username }}</span>
                  <span class="text-slate-800">:&nbsp;{{ reply.content }}</span>
               </div>
            </div>
         </section>
      </div>
      <van-tabbar class="flex items-center justify-start">
         <div class="bg-[#f2f3f5] rounded-md p-2 w-48 h-9 ml-3 text-slate-300" @click="showPopup">发布评论...</div>
         <div class="flex items-center justify-center gap-7 w-44">
            <van-icon size="24px" name="chat-o" :badge="commontList?.length" />
            <van-icon size="24px" :color="supportColor" :name="supportName" :badge="num" @click="clickSupport()" />
            <van-icon size="24px" :name="starName" :color="starColor" @click="clickStar" />
         </div>
      </van-tabbar>

      <popup v-model:content="form.content" @close-popup="showCenter = false" @create="create" :show-center="showCenter">
      </popup>
   </div>
</template>

<style scoped lang="scss"></style>
